import React, {Component} from 'react';
import http from '../../http';
// 引入编辑器组件
import BraftEditor from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css'

class SaveEditor extends Component {
	constructor(props) {
		super(props);
		this.state = {
			// 创建一个空的editorState作为初始值
			editorState: BraftEditor.createEditorState(this.props.value),
			// 配置编辑器工具栏
			controls: [
				'bold', 'italic', 'underline', 'strike-through', 'separator',
				'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
				'link', 'media', 'separator', 'hr', 'separator',
				'separator', 'text-align', 'separator',
				'clear'
			]
		}
	}

	// 数据发生改变的时候调用
	componentWillUpdate(nextProps) {
		// 判断新的props的标志位是true，并且props的value值发生了改变，就设置editorState，否则不设置，如果没有标志位的话，会触发循环调用
		if (nextProps.flag && this.props.value !== nextProps.value) {
			this.setState({
				editorState: BraftEditor.createEditorState(nextProps.value)
			})
		}
	}

	// 编辑器上传媒体文件ajax功能
	editorImgUpload = param => {
		// 定义FormData
		let form = new FormData();
		form.append('upload_file', param.file);
		form.append('original_filename', param.file.name);
		// 调用http对象的editorImgUpload方法，传入表单对象
		http.editorImgUpload(form).then(res => {
			if (res.success) {
				// 通过param参数的success方法，告知编辑器上传成功
				param.success({
					url: res.file_path
				})
			}
		}).catch(err => {
			// 通过param参数的error方法，告知编辑器上传失败
			param.error({
				msg: err
			})
		})
	};

	// 富文本编辑器的数据双向绑定
	handleEditorChange = editorState => {
		this.setState({
			editorState
		});
		// 当数据发生改变就调用父组件的方法，将html格式的内容发送到父组件
		this.props.changeEditor(editorState.toHTML());
	};

	render() {
		return (
			<div className="form-editor">
				{/* BraftEditor组件，value是编辑器的内容，controls是编辑器的工具栏，如果禁用当前富文本编辑器的情况下，隐藏所有工具，media是media工具的扩展对象，uploadFn是指定媒体上传的方法，onChange方法是触发编辑器文本双向绑定，readOnly表示富文本编辑器只读*/}
				<BraftEditor
					value={this.state.editorState}
					controls={this.props.disabled ? [] : this.state.controls}
					media={{uploadFn: this.editorImgUpload}}
					onChange={this.handleEditorChange}
					readOnly={this.props.disabled}
				/>
			</div>
		);
	}
}

export default SaveEditor;